import './index.scss'
import { Button, Input, Select, Space, Table, Form, Modal, Radio, message } from 'antd';
import React, { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { getSiteData, searchSiteData, addSiteData, deleteSiteData, editSiteData, } from '../../../../../utils/zscHttpMethods/httpMethod.jsx';
import { ExclamationCircleFilled } from '@ant-design/icons';

const { confirm } = Modal;


const EditSite = () => {

  //接收id
  const r_id = useLocation().state.r_id
  //将id转为对象
  const r = { r_id }
  //接收线路
  let subway_line = useLocation().state.subway_line
  //接收城市
  let cityName = useLocation().state.cityName

  let city_subway={city:cityName+"/"+subway_line}
  //获取id
  const [editId, setEditId] = useState(1)
  //打开修改模态框
  const [openEdit, setOpenEdit] = useState(false);
  //表单
  const [form] = Form.useForm();
  //分页
  const [total, setTotal] = useState(1)
  //打开模态框
  const [open, setOpen] = useState(false);
  //表格数据
  const [data, setData] = useState([])
  // 页数
  const [currentPage, setCurrentPage] = useState(1);
  //数据编辑处理
  const [editMessage, setEditMessage] = useState({})
  //数据添加处理
  const [editMessage1, setEditMessage1] = useState({})


  // 页面改变
  const Change = (page) => {
    setCurrentPage(page.current);
  }
  //重置
  const clear = () => {
    getData();
    form.resetFields()
  }
  //删除数据
  const deleData = (id) => {
    confirm({
      title: '确定删除该信息吗?',
      icon: <ExclamationCircleFilled />,
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        let params = { id }
        deleteSiteData(params).then(res => {
          getData()
          message.success(res.msg)
        })
      },
      onCancel() {
        message.warning('取消删除')
      },
    });
  }
  //处理数据
  const editData = (value) => {
    setOpenEdit(true);
    console.log(value);
    const editMessage = Object.assign(value, city_subway)
    setEditMessage(editMessage)
    setEditId(value.id)
  }
  //编辑
  const onCreate = (values) => {
    let params = {
      id: editId,
      site: values.site,
      city: values.city,

    }
    editSiteData(params).then(res => {
      getData()
      message.success('修改成功')
    })
    setOpenEdit(false);
  };
  //渲染数据
  useEffect(() => {
    getData()
  }, [])
  //获取数据
  const getData = () => {
    getSiteData({ r_id }).then((res) => {
      let tableData = res.data
      setTotal(tableData.length)
      setData(
        res.data.map((item) => {
          return {
            id: item.id,
            site: item.site,
          };
        })
      )
    })
  }
  //查询数据
  const search = (value) => {
    const params = Object.assign(value, r)
    form.resetFields();
    searchSiteData(params).then((res) => {
      setTotal(res.data.length);
      setData(
        res.data.map((item) => {
          return {
            id: item.id,
            site: item.site,
          };
        })
      );
    })
    console.log(value);
  }
  //添加数据打开模态框
  const addData = () => {
    setOpen(true);
    const editMessage1 = city_subway
    setEditMessage1(editMessage1)
  }
  //添加数据
  const onAdd = (value) => {
    const params = Object.assign(value, r)
    addSiteData(params).then(res => {
      getData()
    })
    setOpen(false);
    console.log(value);
  }
  //表头
  const columns = [
    {
      title: '排序',
      dataIndex: 'id',
      key: 'id',
      align: 'center',
      render: (text, record, index) => index + (currentPage - 1) * 5 + 1
    },
    {
      title: '站点',
      key: 'site',
      dataIndex: 'site',
      align: 'center'
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (_, record) => (
        <Space size="middle">
          {/* <a>Invite {record.name}</a> */}
          <a onClick={() => editData(record)}>编辑</a>
          <a onClick={() => deleData(record.id)}>删除</a>
        </Space>
      ),
    },
  ];
  return (
    <div className="max">
      <div className='top'>
        <div className='top-color'></div>
        <span className='top-text'>编辑站点</span>
      </div>
      <div className='mid'>
        <Form
          colon={false}
          form={form}
          onFinish={search}
          style={{ display: 'flex' }}
          initialValues={{
            status: '全部',
            broker: '',
            theKey: ''
          }}
        >
          <Form.Item label="关键词" name=" site">
            <Input placeholder="请输入关键词" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              搜索
            </Button>
            <Button type="default" onClick={() => clear()}>清空</Button>
          </Form.Item>
        </Form>
        <div className='add'>
          <Button type="primary" onClick={() => addData()}>添加</Button>
        </div>
      </div>
      <div className='bot'>
        <Table columns={columns} dataSource={data} pagination={{
          defaultCurrent: 1, total, defaultPageSize: 5, hideOnSinglePage: true
        }} rowKey={(record) => record.id} current={currentPage} onChange={Change} />
      </div>
      {/* 添加 */}
      <div>
        <CollectionCreateForm
          open={open}
          onAdd={onAdd}
          onCancel={() => {
            setOpen(false);
          }}
          editMessage1={editMessage1}
        />
      </div>
      {/* 编辑 */}
      <div>
        <CollectionEditForm
          openEdit={openEdit}
          onCreate={onCreate}
          onCancel={() => {
            setOpenEdit(false);
          }}
          editMessage={editMessage}
        />
      </div>
    </div>
  )
}
//添加弹框
const CollectionCreateForm = ({ open, onAdd, onCancel, editMessage1 }) => {
  const [form] = Form.useForm();
  useEffect(() => {
    form.setFieldsValue(editMessage1)
  }, [editMessage1])
  return (
    <Modal
      open={open}
      title="添加城市"
      okText="确定"
      cancelText="取消"
      onCancel={onCancel}
      forceRender
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            form.resetFields();
            onAdd(values);
          })
          .catch((info) => {
          });
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
      >
        <Form.Item name="city" label='城市/线路'>
          <Input disabled/>
        </Form.Item>
        <Form.Item name="site" label='站点'>
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
}
//编辑弹框
const CollectionEditForm = ({ openEdit, onCreate, onCancel,editMessage }) => {
  const [form] = Form.useForm();
  useEffect(() => {
    form.setFieldsValue(editMessage)
  }, [editMessage])
  return (
    <Modal
      open={openEdit}
      title="编辑区域"
      okText="确定"
      cancelText="取消"
      onCancel={onCancel}
      forceRender
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            form.resetFields();
            onCreate(values);
          })
          .catch((info) => {
          });
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={{
          status: '通过',
        }}
      >
        <Form.Item name="city" label='城市'>
          <Input disabled/>
        </Form.Item>
        <Form.Item name="site" label='站点'>
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
}
export default EditSite